import * as echarts from 'echarts';
import {html, LitElement, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeClockProps {
    chartId?: string;
    width?: string;
    height?: string;
    thick?: number;
}

@customElement('lit-gauge-clock')
export class LitGaugeClock extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-clock-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Number}) thick: number = 1;

    hour: number = 0;

    getSeries(): any[] {
        const date = new Date();
        const second = date.getSeconds();
        const minute = date.getMinutes() + second / 60;
        this.hour = date.getHours() + minute / 60;
        return [
            {
                name: 'hour',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 12,
                splitNumber: 12,
                clockwise: true,
                axisLine: {
                    lineStyle: {
                        width: 15 * this.thick,
                        color: [[1, 'rgba(0,0,0,0.7)']],
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 15 * this.thick,
                    }
                },
                splitLine: {
                    lineStyle: {
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 3 * this.thick,
                        shadowOffsetX: this.thick,
                        shadowOffsetY: 2 * this.thick,
                    }
                },
                axisLabel: {
                    fontSize: 50 * this.thick,
                    distance: 25 * this.thick,
                    formatter: function (value: any) {
                        if (value === 0) {
                            return '';
                        }
                        return value + '';
                    }
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 12 * this.thick,
                    length: '55%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8 * this.thick,
                        shadowOffsetX: 2 * this.thick,
                        shadowOffsetY: 4 * this.thick
                    }
                },
                detail: {
                    fontSize: 35 * this.thick,
                    formatter: (_value: any): string => (
                        this.hour < 12 ? 'AM' : 'PM'
                    ),
                },
                title: {
                    offsetCenter: [0, '30%']
                },
                data: [
                    {
                        value: (date.getHours() % 12) + minute / 60
                    }
                ]
            },
            {
                name: 'minute',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 60,
                clockwise: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 8 * this.thick,
                    length: '70%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8 * this.thick,
                        shadowOffsetX: 2 * this.thick,
                        shadowOffsetY: 4 * this.thick
                    }
                },
                anchor: {
                    show: true,
                    size: 20 * this.thick,
                    showAbove: false,
                    itemStyle: {
                        borderWidth: 15 * this.thick,
                        borderColor: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8 * this.thick,
                        shadowOffsetX: 2 * this.thick,
                        shadowOffsetY: 4 * this.thick
                    }
                },
                detail: {
                    show: false
                },
                title: {
                    offsetCenter: ['0%', '-40%']
                },
                data: [
                    {
                        value: minute
                    }
                ]
            },
            {
                name: 'second',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 60,
                animationEasingUpdate: 'bounceOut',
                clockwise: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 4 * this.thick,
                    length: '85%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8 * this.thick,
                        shadowOffsetX: 2 * this.thick,
                        shadowOffsetY: 4 * this.thick
                    }
                },
                anchor: {
                    show: true,
                    size: 15 * this.thick,
                    showAbove: true,
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8 * this.thick,
                        shadowOffsetX: 2 * this.thick,
                        shadowOffsetY: 4 * this.thick
                    }
                },
                detail: {
                    show: false
                },
                title: {
                    offsetCenter: ['0%', '-40%']
                },
                data: [
                    {
                        value: second
                    }
                ]
            }
        ];
    }

    option: echarts.EChartsOption = {
        animationDurationUpdate: 300,
        series: this.getSeries(),
    };

    static styles = style;

    updated(): void {
        (this.option.series as any) = this.getSeries();
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
        setInterval(() => {
            const date = new Date();
            const second = date.getSeconds();
            const minute = date.getMinutes() + second / 60;
            const hour = (date.getHours() % 12) + minute / 60;
            this.hour = date.getHours() + minute / 60;
            chart.setOption({
                series: [
                    {
                        name: 'hour',
                        animation: hour !== 0,
                        data: [{ value: hour }]
                    },
                    {
                        name: 'minute',
                        animation: minute !== 0,
                        data: [{ value: minute }]
                    },
                    {
                        animation: second !== 0,
                        name: 'second',
                        data: [{ value: second }]
                    }
                ]
            });
        }, 1000);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width};height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge-clock': LitGaugeClock;
    }
}